/**
 * td 溢出隐藏 组件
 */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Popover } from 'antd';

export default class LineWrap extends PureComponent {
  static propTypes = {
    content: PropTypes.string, // 内容
    lineClampNum: PropTypes.number, // 折的行数
    maxWidth: PropTypes.number, // 单元格最大宽度
  };

  render() {
    const { content, lineClampNum = 2, maxWidth = 180 } = this.props; // 默认值
    if (!!content) {
      if (content.length > 20) {
        return (
          <Popover content={content}>
            <span
              style={{
                WebkitLineClamp: lineClampNum,
                WebkitBoxOrient: 'vertical',
                maxWidth, // 如果属性名和属性值一样，可以写一个
                display: '-webkit-box',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {content}
            </span>
          </Popover>
        );
      }
    }
    return <span>{content}</span>;
  }
}
